<template>
	<el-dialog v-model="visible" :width="screenWidth" :fullscreen="mobile === 'mobile'" :title="dialogHistory.title"
		draggable :close-delay="200" @close="closeDialog" close-icon="CloseBold">
		<div class="app-container">
			<div class="search-container">
				<el-form ref="queryFormRef" :model="queryParams" :inline="true">
					<el-form-item label="关键字" prop="keywords">
						<el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable style="width: 200px"
							@keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
						<el-button @click="resetQuery">
							<i-ep-refresh />
							重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!--      <el-card shadow="never">-->
			<el-table v-loading="loading" :data="tableList" highlight-current-row border height="400">
				<el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
				<el-table-column key="name" label="命令名称" align="center" prop="name" width="260" />
				<el-table-column key="isAuto" label="下发类型" align="center" width="90" prop="isAuto">
					<template #default="scope">
						<el-tag :type="scope.row.isAuto ? '' : 'warning'">{{ scope.row.isAuto ? '自动' : '手动' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column key="messageId" label="消息id" align="center" prop="messageId" width="300" />
				<!-- <el-table-column
					key="deviceCode"
					label="设备编码"
					align="center"
					width="160"
					prop="deviceCode"
				>
				</el-table-column> -->
				<el-table-column key="status" label="下发状态" align="center" width="90" prop="status">
					<template #default="scope">
						<el-tag v-if="scope.row.status === 0" type="info"
						>待下发</el-tag
						>
						<el-tag v-if="scope.row.status === 1">已下发</el-tag>
						<el-tag v-if="scope.row.status === 2" 
						>已回调</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column key="jobs" label="下发命令" align="center" width="90" prop="jobs">
					<template #default="scope">
						<el-button type="primary" link size="small" @click="openDialog(scope.row.jobs)">
							查看
						</el-button>
					</template>
				</el-table-column>
				<el-table-column key="resultMsg" label="返回结果" align="center" width="90" prop="resultMsg">
					<template #default="scope">
						<el-button v-if="scope.row.resultMsg !== null" type="primary" link size="small"
							@click="openDialog(scope.row.resultMsg)">
							查看
						</el-button>
					</template>
				</el-table-column>
				<el-table-column key="result" label="返回状态" align="center" width="90" prop="result">
				</el-table-column>
				<el-table-column key="createTime" label="创建时间" align="center" width="160" prop="createTime">
				</el-table-column>
				<el-table-column key="distributeTime" label="下发时间" align="center" width="160" prop="distributeTime">
				</el-table-column>
				<el-table-column key="resultTime" label="返回时间" align="center" width="160" prop="resultTime">
				</el-table-column>
			</el-table>

			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageIndex"
				v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
			<!--      </el-card>-->
		</div>
	</el-dialog>

	<el-dialog v-model="dialog.visible" :title="dialog.title" :width="screenWidth" :fullscreen="mobile === 'mobile'"
		class="system" style="width: 500px;height: 400px;" close-icon="CloseBold" draggable>
		<el-form label-width="100px">
				<el-input v-model="jobConten"  disabled type="textarea" :autosize="{ minRows: 8, maxRows: 20 }" />
		</el-form>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, computed } from "vue";
import { issueCommandLogPage } from "@/api/system/device";
import { ParamsType, CheckinDeviceCommandLogListForm } from "@/api/system/device/types";
import { getDicts } from "@/store/modules/dict";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => (screenStore.device));
const screenWidth = ref(1400)
const dialog = reactive<DialogOption>({
	visible: false,
});
function initScreen() {
	if (mobile.value === 'mobile') {
		screenWidth.value = screenStore.screenWidth;
	} else {
		screenWidth.value = 1400;
	}
}

const emit = defineEmits(["sendHistoryClose"]);
const instance = getCurrentInstance();
let { proxy, ctx } = instance;
const props = defineProps({
	dialogHistory: {
		type: Object,
		default: () => ({
			visible: false,
			title: "命令下发记录",
			code: 0,
		}),
	},
});
const visible = ref(props.dialogHistory.visible);
let loading = ref(false);

const queryFormRef = ref<ElForm>();
const tableList = ref<CheckinDeviceCommandLogListForm[]>();
const queryParams = reactive<ParamsType>({
	pageIndex: 1,
	pageSize: 20,
	deviceCode: props.dialogHistory.code
});
let total = ref(0);
const jobConten=ref('');
/* 发送关闭信息并返回选择信息 */
function sendHistoryClose() {
	emit("sendHistoryClose");
}

/**
 * 关闭弹窗
 */
function closeDialog() {
	visible.value = false;
	sendHistoryClose();
}

function openDialog(content: string) {
	jobConten.value=content;
	dialog.visible = true;
	dialog.title = "命令详情";
	// alert(content);
}

/**
 * 重置表单
 */
function resetForm() {
	queryFormRef.value.resetFields();
	queryFormRef.value.clearValidate();
}

/* 列表查询 */
async function handleQuery() {
	loading.value = true;
	let list = await issueCommandLogPage(queryParams);
	if (list.type === 0) {
		if (list.success) {
			tableList.value = list.data.list;
			queryParams.pageIndex = list.data.pageNum;
			queryParams.pageSize = list.data.pageSize;
			total.value = list.data.total;
		} else {
			ElMessage.error(list.msg);
		}
	} else {
		ElMessage.error(list.msg);
	}
	loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageIndex = 1;
	queryParams.pageSize = 20;
	// queryParams.code = props.dialogHistory.code;
	handleQuery();
}

onMounted(() => {
	initScreen()

	handleQuery();
});

onUnmounted(() => {
	// closeDialog();
	// resetForm()
});

function genderFilter(genderValue) {
	let tempgender = gender.filter((item) => item.value === genderValue);
	if (tempgender[0] && tempgender[0].label) {
		return tempgender[0].label;
	} else {
		return ''
	}
}
const gender = getDicts("gender"); //性别
</script>

<style lang="less" scoped>
.app-container {
	padding: 0px;
}
</style>
